<template>
  <page-view>
    <div class="function-btn">
      <el-button class="clear-btn" @click="handleReset">清空画板</el-button>
      <el-button class="save-btn" @click="handleGenerate">生成图片</el-button>
    </div>
    <el-row>
      <el-col :span="12">
        <div class="">签名区域</div>
        <vue-esign
            ref="mySign"
            :width="canWidth"
            :height="canHeight"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
            :bg-color="bgColor"
        />
      </el-col>
      <el-col :span="12">
        <div class="">签名图片</div>
        <img :src="resultImg" alt="">
      </el-col>
    </el-row>
  </page-view>
</template>

<script setup>
import { ref, onMounted } from "vue";
const count = ref(0)

const arr = [{key:'张三'}, {key:'李四'}]
const result = arr.find(item => {
  return item.key == '张三'
})
console.log('result:', result)

function add() {
  count.value++
}

onMounted(() => {
  add()
  let a = count.value
  console.log('a:', a)
})

</script>

<script>

import VueEsign from 'vue-esign';
export default {
  components: {
    VueEsign,
  },
  data() {
    return {
      canWidth: 800, // 画布宽度--是不会超出父元素的宽度的--设置也不行
      canHeight: 500, // 画布高度--是不会超出父元素的宽度的--设置也不行
      lineWidth: 6,//画笔粗细
      lineColor: '#000000',//画笔颜色
      bgColor: '#f3f4f5',//画布背景
      isCrop: false,//是否裁剪
      isClearBgColor: true,//是否清空背景色
      resultImg: '', //生成签名图片-base64
    }
  },
  methods:{
    handleReset() {
      console.log('清除');

      // 画布被清除时 背景色也被清除
      this.$refs.mySign.reset();

      // 重新设置背景色
      const canvas = this.$refs.mySign.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = "#f3f4f5";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
    },

    handleGenerate() {
      console.log('生成图片');
      this.$refs.mySign.generate().then(res => {
        console.log('图片结果：', res);
        this.resultImg = res;
      }).catch(err => {
        alert(err) // 画布没有签字时会执行这里 'Not Signned'
      })
    }
  },
}
</script>

<style lang="scss" scoped>


/* 功能按钮部分 */
.function-btn {
  margin-bottom: 15px;
  display: flex;
  //transform: rotate(90deg);
}

/* 重写按钮 */
.clear-btn {

}

/* 保存按钮 */
.save-btn {

}
</style>
